<template>
	<view class="content" v-if="show==1">
		<!-- #ifndef MP-WEIXIN -->
		<view class="ding" :style="'padding-top:'+sheight+'px;'">
			<view class="ding2">
				<image src="../../static/images/dizhi.png" mode="aspectFit" style="margin-right: 15px;"></image>
				<image @click="sou" src="../../static/images/ss.png" mode="aspectFit"></image>
				
			</view>
			<view class="ding3">
				服务分类
			</view>
			<view class="ding4">
				<image @click="zhongxin" src="../../static/images/jiahao.png" mode="aspectFit"></image>
			</view>
		</view><!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="ding" :style="'padding-top:'+sheight+'px;'">
			<view class="ding2">
				<image @click="sou" src="../../static/images/ss.png" mode="aspectFit"></image>
				<image style="margin-left: 20px;" @click="zhongxin" src="../../static/images/jiahao.png" mode="aspectFit"></image>
			</view>
			<view class="ding3">
				服务分类
			</view>
			<view class="ding4">
				
			</view>
		</view><!-- #endif -->
		
		<view class="top" :style="'margin-top:'+mheight+'px;'">
			<!--<view class="sreach">
				<view class="sreach2">
					<input type="text" :value="keyword" @confirm="sousuo" @input="key" confirm-type="search" placeholder="请输入关键词直接查找课程">
				</view>
				<view class="sreach3" @click="sou">搜索</view>
			</view>-->
			<view class="dalei">
				<view class="dalei2" @click="lei" :data-id="c.id" :data-index="index" v-for="(c,index) in cate">
					<image :src="c.image" mode="aspectFit"></image>
					<view class="dalei2-1">{{c.title}}</view>
				</view>
			</view>
			<view class="top2">
				<picker class="top3" @change="jiage" :value="pxindex" :range="paixu">
					<view class="top4">
						<text>{{paixu[pxindex]}}</text>
						<image src="../../static/images/xia.png" mode="aspectFit"></image>
					</view>
				</picker>
				<picker class="top3" @change="fuwu" :value="fcindex" :range="fwcate.fuwu">
					<view class="top4">
						<text v-if="fcindex==0">服务分类</text>
						<text v-if="fcindex>0">{{fwcate.fuwu[fcindex]}}</text>
						<image src="../../static/images/xia.png" mode="aspectFit"></image>
					</view>
				</picker>
				<picker class="top3" @change="nian2" :value="nindex" :range="nianji.nian">
					<view class="top4">
						<text v-if="nindex==0">服务时长</text>
						<text v-if="nindex>0">{{nianji.nian[nindex]}}</text>
						<image src="../../static/images/xia.png" mode="aspectFit"></image>
					</view>
				</picker>
				
				<view class="top3" @click="xshaixuan" data-type="3">
					<view class="top4">
						<text>精准筛选</text>
						<image src="../../static/images/xia.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="news" >
			<view class="goods4" v-for="(g,index) in goods">
				<view class="orders" style="width:100%;">
					<view style="width:100%;display: flex;">
					<image @click="gurl" :data-id="g.id" :src="g.avatar" mode="aspectFit" class="touxiang"></image>
					<view class="goods4-2">
						<view class="goods4-3" style="display: flex;">
							<view @click="gurl" :data-id="g.id" class="fenlei">{{g.cate2}}</view>
							<image @click="jubao" :data-index="index" class="map4" src="../../static/images/dian.png" mode="aspectFit"></image>
						</view>
						<view class="goods4-3" @click="gurl" :data-id="g.id">
							<view class="zhuangtai" style="width:50%;">S{{g.teacher_id}}-{{g.nickname}}</view>
							<view class="shengfen" style="color:#05c160;font-size: 0.7rem;width:50%;">距您{{g.juli}}km</view>
						</view>
						<view class="goods4-3" @click="gurl" :data-id="g.id">
							<view class="zhuangtai">{{g.nianji}}</view>
							<view class="shengfen" style="color:red;">{{zdtype==1?'㉿':'￥'}}{{g.price}}</view>
						</view>
						<view class="goods4-3" @click="gurl" :data-id="g.id">
							<view class="zhuangtai">{{g.fuwu_cate}}</view>
							<view class="shengfen">已售{{g.sales}}</view>
						</view>
					</view>
					</view>
					<view class="weizhi" @click="gurl" :data-id="g.id">
						<image src="../../static/images/map3.png" mode="aspectFill"></image>
						<view class="weizhi2">{{g.address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width:100%;height:60px;"></view>
		<image class="empty" v-if="!goods[0]" src="../../static/images/empty.png" mode="widthFix"></image>
		
		
		<view class="zheceng" v-if="is_xk==true" @click="xshaixuan"></view>
		<view class="zheceng2" v-if="is_xk==true">
			<view class="zheceng3">精准筛选</view>
			<view class="zheceng4">
				<view class="zheceng4-1">一级分类</view>
				<view class="zheceng4-2">
					<view @click="lei" data-id="0" :class="cid==0?'zheceng4-2-1 zcactive':'zheceng4-2-1'">不限</view>
					<view @click="lei" data-type="1" :data-id="c.id" :data-index="index" :class="cid==c.id?'zheceng4-2-1 zcactive':'zheceng4-2-1'" v-for="(c,index) in cate">{{c.title}}</view>
				</view>
			</view>
			<view class="zheceng4" v-if="cid>0">
				<view class="zheceng4-1">二级分类</view>
				<view class="zheceng4-2">
					<view @click="lei2" data-id="0" :class="cid2==0?'zheceng4-2-1 zcactive':'zheceng4-2-1'">不限</view>
					<view @click="lei2" :data-id="c.id" :class="cid2==c.id?'zheceng4-2-1 zcactive':'zheceng4-2-1'" v-for="c in cate2">{{c.title}}</view>
				</view>
			</view>
			<view class="zheceng5" @click="xshaixuan">关闭</view>
		</view>
		
		<view class="zheceng" v-if="is_jb==true" @click="jbclose"></view>
		<view class="jubaocause" v-if="is_jb==true">
			<view class="jubaocause2">
				<text>举报原因</text>
				<image src="../../static/cha.png" mode="aspectFit" @click="jbclose"></image>
			</view>
			<view class="jubaocause3">
				<textarea @input="cause" placeholder="请填写举报原因"></textarea>
			</view>
			<view class="jubaocause4">
				<view class="jubaocause4-1" @click="jbclose">取消</view>
				<view class="jubaocause4-2" @click="bao">提交</view>
			</view>
		</view>
		<daohang count='2'></daohang>
	</view>
</template>

<script>
	var app=getApp();
	import daohang from "../../components/daohang.vue"
	export default {
		components: {
			daohang
		},
		data() {
			return {
				cate:[],
				cate2:[],
				cid:0,
				cid2:-1,
				nianji:[],
				nid:0,
				nindex:0,
				paixu:['距离最近','默认排序','价格最低','价格最高','距离最远'],
				pxindex:0,
				show:0,
				keyword:'',
				goods:[],
				fwcate:[],
				fcindex:[],
				sheng:[''],
				sindex:0,
				is_sx:false,
				is_xk:false,
				is_jb:false,
				yuanyin:'',
				zt_id:0,
				jb_index:0,
				fw_id:0,
				lng:0,
				lat:0,
				zdtype:0,
				page:1,
				next:0,
				site:[],
				sheight:0,
				mheight:0
			}
		},
		onLoad() {
			var that=this;
			uni.getSystemInfo({
			    success: function (res) {
					if(res.platform=='ios'){
						//that.zdtype=1;
					}
					that.sheight=res.statusBarHeight;
					that.mheight=40+res.statusBarHeight;
			    }
			});
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif
			uni.showLoading({
			    title: '数据加载中'
			});
			//that.getdata(0,1);return false;
			uni.getLocation({
			    type: 'gcj02',
			    success: function (res) {
					that.lng=res.longitude;
					that.lat=res.latitude;
					that.getdata(0,1);
			    },
				fail(e){
					that.getdata(0,1);
					/*uni.getLocation({
					    type: 'gcj02',
					    success: function (res) {
							that.lng=res.longitude;
							that.lat=res.latitude;
							that.getdata(0,1);
					    },
						fail(e2){
							that.getdata(0,1);
						}
					});*/
				}
			});
		},
		methods: {
			getdata(t=0,tt=0){
				var that=this;
				if(tt==0){
				uni.showLoading({
				    title: '数据加载中'
				});
				}
				var uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uid=0;
				}
				uni.request({
				    url: app.globalData.url+"goods/index",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:uid,cid:that.cid,cid2:that.cid2,page:that.page,px:that.pxindex,sheng:that.sheng[that.sindex],fw_id:that.fw_id,nid:that.nid,keyword:that.keyword,lng:that.lng,lat:that.lat},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							app.error_msg(res.data.msg);
						}
						if(t==1){
							that.goods=res.data.data.goods
						}else{
						that.goods=that.goods.concat(res.data.data.goods)
						}
						that.next=res.data.data.next
						that.cate=res.data.data.cate
						that.nianji=res.data.data.nianji
						that.fwcate=res.data.data.fwcate
						that.sheng=res.data.data.sheng
						that.site=res.data.data.site
						that.page++
						that.show=1;
				    }
				});
			},
			jubao(e){
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.showModal({
					    content: '请登录后操作',
						confirmText:'去登录',
					    success: function (res) {
					        if (res.confirm) {
					            uni.navigateTo({
					                url: '/pages/login/login'
					            });
					        }
					    }
					});
					return false;
				}
				this.jb_index=e.currentTarget.dataset.index;
				var that=this;
				uni.showActionSheet({
				    itemList: ['举报', '拉黑'],
				    success: function (res) {
						if(res.tapIndex==0){
							that.is_jb=true;
						}else{
							uni.showModal({
							    title: '确定要拉黑该课程吗？',
							    content: '拉黑后，将不会再对您展示该课程',
							    success: function (res2) {
							        if (res2.confirm) {
							            that.lahei();
							        } else if (res.cancel) {
							            console.log('用户点击取消');
							        }
							    }
							});
							
						}
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			},
			zhongxin(){
				const uid = uni.getStorageSync('uid');
				if(app.isBlank(uid)==true){
					uni.navigateTo({
					    url: "/pages/login/login"
					});
					return false;
				}
				if(this.site.is_teacher!=1){
					uni.showModal({
					    title: '入驻师傅后才能发布服务',
					    content: '请到首页点击“+”进行入驻',
						showCancel:false,
						confirmText:'我知道啦',
					    success: function (res2) {
					        
					    }
					});
					return false;
				}
				uni.navigateTo({
				    url: '/pages/teacher/kecheng'
				});
			},
			lahei(){
				var that=this;
				uni.showLoading({
				    title: '请求中..'
				});
				const uid = uni.getStorageSync('uid');
				uni.request({
				    url: app.globalData.url+"index/lahei",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:uid,id:that.goods[that.jb_index].id,type:2},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						that.goods.splice(that.jb_index,1);
						uni.showToast({
						    title: res.data.msg,
							icon:'success',
						    duration: 1500
						});
				    }
				});
			},
			jbclose(){
				this.yuanyin='';
				this.is_jb=false;
			},
			bao(){
				var that=this;
				if(app.isBlank(this.yuanyin)==true){
					uni.showToast({
					    title: "请填写举报原因",
						icon:'none',
					    duration: 1000
					});
					return false;
				}
				uni.showLoading({
				    title: '请求中..'
				});
				const uid = uni.getStorageSync('uid');
				uni.request({
				    url: app.globalData.url+"index/jubao",
					method:"POST",
					dataType:"json",
					header: {
					    'content-type': 'application/x-www-form-urlencoded'
					},
				    data: {uid:uid,id:that.goods[that.jb_index].id,cause:that.yuanyin,type:2},
				    success: (res) => {
						uni.hideLoading();
						if(res.data.code!=1){
							uni.showToast({
							    title: res.data.msg,
								icon:'none',
							    duration: 1500
							});
							return false;
						}
						that.jbclose();
						uni.showToast({
						    title: res.data.msg,
							icon:'success',
						    duration: 1500
						});
				    }
				});
			},
			cause: function(event) {
			    this.yuanyin = event.target.value
			},
			shaixuan(e){
				var type=e.currentTarget.dataset.type;
				if(this.is_sx==true && type==this.type){
					this.type=0;
					this.is_sx=false;
				}else{
					this.type=type;
					this.is_sx=true;
				}
			},
			xshaixuan(){
				this.is_xk=!this.is_xk;
				this.type=0;
				this.is_sx=false;
			},
			guan(){
				this.type=0;
				this.is_sx=false;
			},
			jiage(e){
				this.pxindex = e.target.value;
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			nian2(e){
				this.nindex = e.target.value;
				this.nid=this.nianji.nianji[e.target.value].id;
				
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			fuwu(e){
				this.fcindex = e.target.value;
				this.fw_id=this.fwcate.fwcate[e.target.value].id;
				
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			shengfen(e){
				this.sindex = e.target.value;
				
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			lei(e){
				var p=e.currentTarget.dataset.id;
				var index=e.currentTarget.dataset.index;
				this.cid=p;
				if(p==0){
					this.cid2=-1;
					this.cate2=[];
				}else{
					this.cate2=this.cate[index].cate;
				}
				
				if(e.currentTarget.dataset.type==1){
					
					return false;
				}
				if(p>0){
				this.cid2=0;
				}
				this.is_xk=false;
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			lei2(e){
				var p=e.currentTarget.dataset.id;
				this.cid2=p;
				this.is_xk=false;
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			gurl(e){
				var id=e.currentTarget.dataset.id;
				uni.navigateTo({
				    url: '/pages/goods/detail?id='+id
				});
			},
			key: function(event) {
			    this.keyword = event.target.value
			},
			sousuo(event){
				this.keyword=event.target.value;
				this.is_sx=false;
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			sou(){
				uni.navigateTo({
				    url: '/pages/goods/search'
				});
				return false;
				this.page=1;
				this.next=0;
				this.getdata(1);
			},
			onReachBottom(){
				if(this.next==1){
					this.next=0;
					this.getdata();
				}
			},
			onShareAppMessage(res) {
				var taht=this;
			    return {
			      path: '/pages/goods/index'
			    }
			}
		}
	}
</script>

<style>
	.ding{width:94%;padding: 0px 3%;height:45px;overflow: hidden;background-color: #ededed;position: fixed;top:0px;z-index:999;}
	.ding2{width:25%;height:45px;float: left;}
	.ding2 image{width:23px;height:23px;margin-top: 11px;float: left;}
	.ding3{width:50%;height:45px;float: left;line-height: 45px;font-size: 1rem;color:#000;text-align: center;font-weight: 550;}
	.ding4{width:25%;height:45px;float: left;}
	.ding4 image{width:23px;height:23px;margin-top: 11px;float: right;}
	
	.jubaocause4-2{width:100px;height:35px;line-height: 35px;background-color: #05c160;color:#fff;text-align: center;float: right;margin-top: 14px;border-radius: 3px;}
	.jubaocause4-1{width:100px;height:35px;line-height: 35px;background-color: #ccc;color:#fff;text-align: center;float: left;margin-top: 14px;border-radius: 3px;}
	.jubaocause4{width:90%;margin: 0 auto;height:50px;overflow: hidden;}
	.jubaocause3 textarea{width:94%;height:140px;font-size: 0.85rem;color:#333;line-height: 24px;padding: 5px 3%;}
	.jubaocause3{width:90%;height:150px;background-color: #f8f8f8;border-radius: 3px;margin: 0 auto;}
	.jubaocause2 image{width:20px;height:20px;float: right;margin-top: 10px;}
	.jubaocause2 text{font-weight: 550;}
	.jubaocause2{width:90%;margin: 0 auto;height:40px;overflow: hidden;line-height: 40px;}
	.jubaocause{width:300px;height:250px;position: fixed;top:50%;margin-top: -125px;left:50%;margin-left: -150px;background-color: #fff;z-index: 9999;border-radius: 5px;}
	
	.weizhi2{width:100%;height:25px;line-height: 25px;flex:1;overflow: hidden;}
	.weizhi image{width:15px;height:15px;margin-top: 5px;}
	.weizhi{width:100%;height:25px;display: flex;}
	.touxiang{width:100px;height:100px;margin-right: 10px;border-radius: 5px;}
	.dalei2-1{width:100%;height:20px;line-height: 20px;text-align: center;overflow: hidden;font-size: 0.8rem;}
	.dalei2 image{width:35px;height:35px;}
	.dalei2{width:20%;float: left;text-align: center;margin-top: 15px;}
	.dalei{width:100%;overflow: hidden;margin-bottom: 10px;}
	.zheceng5{width:100%;height:35px;line-height: 35px;text-align: center;position: absolute;bottom: 0px;background-color:#f6f6f6 ;}
	.zcactive{border-color: #05c160!important;background-color: #cff4e0!important;}
	.zheceng4-2-1:nth-child(3n+3){margin-right: 0px!important;}
	.zheceng4-2-1{width:31%;height:30px;line-height: 30px;border:1px #f6f6f6 solid;text-align: center;background-color: #f6f6f6;border-radius: 5px;margin-right: 2.2%;margin-bottom: 8px;float: left;overflow: hidden;font-size: 0.8rem;}
	.zheceng4-2{width:100%;overflow: hidden;margin-top: 5px;}
	.zheceng4-1{width:100%;height:25px;line-height: 25px;font-size: 0.9rem;font-weight: 600;}
	.zheceng4{width:94%;padding: 10px 3%;}
	.zheceng3{width:100%;height:40px;line-height: 40px;text-align: center;border-bottom: 1px #eee solid;}
	.zheceng2{width:300px;height:100vh;position: fixed;top:0px;right: 0px;background-color: #fff;z-index: 9999;}
	.zheceng{width:100%;height:100vh;position: fixed;top:0px;z-index: 9999;background-color: #000000;opacity: 0.7;}
	.empty{width:70%;margin: 0 auto;}
	.tanceng2-2{width:100%;height:40px;line-height: 40px;overflow: hidden;flex:1;}
	.tanceng2-1 image{width:20px;height:20px;margin-top: 10px;margin-right: 10px;}
	.tanceng2-1{width:100%;height:40px;border-bottom: 1px #eee dashed;display: flex;}
	.tanceng2{width:94%;padding: 0px 3%;background-color: #fff;position: fixed;top:88px;z-index: 9996;min-height: 100px;max-height:80vh;overflow: auto;}
	.tanceng{width:100%;height:100vh;position: fixed;top:0px;background-color: #000000;opacity: 0.6;z-index: 9995;}
	.top4 text{float: left;font-size: 0.75rem;}
	.top4 image{width:12px;height:12px;margin-top: 10px;float: left;}
	.top4{display: inline-block;height:30px;line-height: 30px;margin: 0 auto;}
	.top3{width:25%;height:30px;float: left;text-align: center;}
	.top2{width:100%;height:30px;overflow: hidden;margin-top: 8px;border-bottom: 1px #eee solid;padding-bottom: 5px;}
	
	.sreach2 input{width:88%;padding:0px 6%;height:30px;font-size: 0.85rem;}
	.sreach3{width:70px;height:28px;margin-left: 10px;text-align: center;line-height: 28px;color: #fff;border:1px #fff solid;border-radius: 8px;}
	.sreach2{width:100%;height:30px;flex:1;background-color: #fff;border-radius: 20px;position: relative;}
	.sreach{width:94%;padding:10px 3%;display: flex;background-color: #05c160;}
	
	page{background-color: rgb(245, 245, 245);}
	.goods44{width:100%;overflow: hidden;}
	.goods4-9{width:100%;height:22px;line-height: 22px;color:#fe2424;overflow: hidden;font-size: 0.8rem;}
	.goods4-8 text{color:#666;font-size: 0.8rem;}
	.goods4-8{width:100%;height:22px;line-height: 22px;overflow: hidden;font-size: 0.8rem;}
	.goods4-7{width:70%;height:44px;float: left;}
	
	.goods4-4{width:30%;height:44px;float: left;line-height: 44px;text-align: center;color:#fe2424;font-size: 1.5rem;}
	.guanjianci{width:100%;height:25px;line-height: 25px;overflow: hidden;font-size: 0.8rem;}
	.zhuangtai{width:70%;height:25px;line-height: 25px;float: left;overflow: hidden;font-size: 0.8rem;}
	.shengfen{width:30%;height:25px;line-height: 25px;overflow: hidden;float: left;text-align: right;font-size: 0.8rem;}
	.nianji{width:30%;height:25px;line-height: 25px;text-align: right;float: left;color:red;}
	.fenlei{width:100%;height:25px;line-height: 25px;overflow: hidden;font-weight: 600;font-size: 0.9rem;flex:1;}
	.map4{width:16px;height:16px;margin-top: 5px;}
	.goods4-3{width:100%;overflow: hidden;}
	.goods4-2{width:100%;flex: 1;}
	.goods4-1{width:120px;height:80px;border-radius: 5px;margin-right: 10px;}
	.goods4{width:96%;padding: 10px 2%;border-radius: 5px;display: flex;position: relative;background-color: #fff;margin: 8px 0px;padding-bottom: 4px;}
	.news{width:94%;margin:0px 3%;overflow: hidden;}
	
	.uni-swiper-tab{width:94%;padding: 0px 3%;overflow: hidden;position: sticky;top:40px;z-index: 9999;background-color: #fff;height:37px;line-height: 35px;padding-bottom: 3px;border-bottom: 1px #eee solid;}
	.top{width:100%;overflow: hidden;background-color: #fff;}

</style>
